<template>
  <view>
    <VNavbar :searchText="searchText" @search="getList" />
    <view class="drop-down mb-30rpx h-88rpx flex items-center justify-between bg-#fff px-74rpx text-28rpx"
      v-if="clientType == 'enterprise'">
      <view v-for="item in menu" :key="item.type" class="flex items-center " @tap="showPopup(item)">
        <text class="mr-8rpx pb-8rpx">
          {{ item.name }}
        </text>
        <up-icon color="#4e5969" size="16rpx" name="arrow-down-fill" />
      </view>
    </view>
    <view class="min-h-100vh bg-#fff px-24rpx">
      <view class="mb-20rpx pt-40rpx">
        <view class="mb-20rpx flex items-center justify-between">
          <text class="text-[28rpx] text-[#1d2129] font-semibold leading-[36rpx]">
            历史搜索
          </text>
          <up-icon name="trash" size="32rpx" @click="deleteHistoryAll" />
        </view>
        <view class="flex flex-wrap">
          <view v-for="(item, index) in historyList" :key="index" class="mb-20rpx mr-20rpx">
            <view class="flex items-center rounded-full bg-#f6f7f8 px-20rpx py-8rpx">
              <text class="mr-12rpx max-w-170rpx truncate text-26rpx color-#888 leading-36rpx">
                {{ item.title }}
              </text>
              <up-icon name="close" size="24rpx" @click.stop="deleteHistory(item)" />
            </view>
          </view>
        </view>
      </view>
      <view class="mb-30rpx">
        <view class="title mb-20rpx text-[28rpx] text-[#1d2129] font-semibold leading-[36rpx]">
          推荐搜索
        </view>
        <view class="flex flex-wrap">
          <view v-for="(item, index) in recommendList" :key="index" class="mb-20rpx mr-20rpx"
            @click="clicksearchText(item.value)">
            <view class="flex items-center rounded-full bg-#f6f7f8 px-20rpx py-8rpx">
              <text class="max-w-170rpx truncate text-26rpx color-#888 leading-36rpx">
                {{ item.value }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex overflow-x-auto">
        <view class="mr-24rpx w-396rpx flex-shrink rounded-16rpx bg-#faeef0 px-26rpx pb-20rpx pt-32rpx"
          v-if="HotObj.userList.length > 0">
          <view class="flex">
            <image class="h-42rpx w-42rpx" :src="base_Image_url + 'search-1.png'" />
            <view class="mb-24rpx text-[30rpx] text-[#f23b3d] font-600 leading-42rpx">
              用户职位榜
            </view>
          </view>
          <view class="rounded-16rpx bg-#fff p-24rpx w-346rpx">
            <navigator class="mb-32rpx truncate text-26rpx color-#333 leading-36rpx" url="/pages/common/search/result"
              v-for="item in HotObj.userList">
              {{item.sort}}.{{item.job.name}}
            </navigator>
          </view>
        </view>
        <view class="mr-24rpx w-396rpx flex-shrink rounded-16rpx bg-#f9efe3 px-26rpx pb-20rpx pt-32rpx"
          v-if="HotObj.userCompanyList.length > 0">
          <view class="flex">
            <image class="h-42rpx w-42rpx" :src="base_Image_url + 'search-2.png'" />
            <view class="mb-24rpx text-[30rpx] text-[#E86A2A] font-600 leading-42rpx">
              用户公司榜
            </view>
          </view>
          <view class="rounded-16rpx bg-#fff p-24rpx w-346rpx">
            <navigator class="mb-32rpx truncate text-26rpx color-#333 leading-36rpx" url="/pages/common/search/result"
              v-for="item in HotObj.userCompanyList">
              {{item.sort}}.{{item.company.name}}
            </navigator>
          </view>
        </view>
        <view class="mr-24rpx w-396rpx flex-shrink rounded-16rpx bg-#f9efe3 px-26rpx pb-20rpx pt-32rpx"
          v-if="HotObj.companyList.length> 0">
          <view class="flex">
            <image class="h-42rpx w-42rpx" :src="base_Image_url + 'search-2.png'" />
            <view class="mb-24rpx text-[30rpx] text-[#E86A2A] font-600 leading-42rpx">
              搜企业公司榜
            </view>
          </view>
          <view class="rounded-16rpx bg-#fff p-24rpx w-346rpx">
            <navigator class="mb-32rpx truncate text-26rpx color-#333 leading-36rpx" url="/pages/common/search/result"
              v-for="item in HotObj.companyList">
              {{item.sort}}.{{item.company.name}}
            </navigator>
          </view>
        </view>
        <view class="mr-24rpx w-396rpx flex-shrink rounded-16rpx bg-#f9efe3 px-26rpx pb-20rpx pt-32rpx"
          v-if="HotObj.schoolList.length > 0">
          <view class="flex">
            <image class="h-42rpx w-42rpx" :src="base_Image_url + 'search-2.png'" />
            <view class="mb-24rpx text-[30rpx] text-[#E86A2A] font-600 leading-42rpx">
              企业搜索学校榜
            </view>
          </view>
          <view class="rounded-16rpx bg-#fff p-24rpx w-346rpx">
            <navigator class="mb-32rpx truncate text-26rpx color-#333 leading-36rpx" url="/pages/common/search/result"
              v-for="item in HotObj.schoolList">
              {{item.sort}}.{{item.sort.name}}
            </navigator>
          </view>
        </view>
        <view class="w-396rpx flex-shrink rounded-16rpx bg-#f9efe3 px-26rpx pb-20rpx pt-32rpx"
          v-if="HotObj.majorList.length > 0">
          <view class="flex">
            <image class="h-42rpx w-42rpx" :src="base_Image_url + 'search-2.png'" />
            <view class="mb-24rpx text-[30rpx] text-[#E86A2A] font-600 leading-42rpx">
              企业搜索专业榜
            </view>
          </view>
          <view class="rounded-16rpx bg-#fff p-24rpx w-346rpx">
            <navigator class="mb-32rpx truncate text-26rpx color-#333 leading-36rpx" url="/pages/common/search/result"
              v-for="item in HotObj.majorList">
              {{item.sort}}.{{item.sort.name}}
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import VNavbar from './components/v-navbar.vue';
  import { useUserStore } from '@/store';
  import { commonConfigRank, commonConfigCli } from "@/api/common";
  import storage from "@/utils/storage";
  interface MenuItem {
    type : string;
    name : string;
    showPopup : boolean;
    url ?: string;
  }

  const menu = ref<Array<MenuItem>>([
    {
      name: '城市',
      type: '1',
      showPopup: true,
    },
    {
      name: '学历',
      type: '2',
      showPopup: true,
    },
    {
      name: '岗位性质',
      type: '3',
      showPopup: true,
    },
    {
      name: '高级筛选',
      type: '4',
      showPopup: true,
      url: '/pages/common/search-more/index'
    }
  ]);
  // type 1用户职位榜 2用户公司榜 3搜企业公司榜 4企业搜索学校榜 5企业搜索专业榜
  const HotObj = ref({
    userList: [],
    userCompanyList: [],
    companyList: [],
    schoolList: [],
    majorList: []
  })
  const showPopup = (params) => {
    if (params.url) {
      uni.navigateTo({
        url: params.url
      })
    }
  }
  const options = ref<Record<string, string>>({});
  const historyList = ref([
    { title: '肯尼亚橄榄石' },
    { title: '博力汉姆' },
    { title: '博力汉姆' },
  ]);
  const recommendList = ref([]);
  const searchText = ref('');
  const clicksearchText = (value) => {
    console.log('tuijianci',value);
    searchText.value = value
  };
  const getList = (value) => {
    if (value.searchText !== '') {
      let history = uni.getStorageSync('historyList')
      console.log(value, history, '索索')
      if (history) {
        if (history.length > 5) {
          history.shift()
        }
        history.push({
          title: value.searchText,
        });
      } else {
        history = []
        history.push({
          title: value.searchText,
        });
      }
      uni.setStorageSync('historyList', history)
    }
    historyList.value = history
    uni.navigateTo({
      url: '/pages/common/search/result?searchText=' + value.searchText
    })
  }
  const deleteHistory = (value) => {
    console.log('------', value)
    let arr = []
    historyList.value.forEach((item) => {
      if (value.title !== item.title) {
        arr.push(item)
      }
    })
    historyList.value = arr
    uni.setStorageSync('historyList', arr)
  }
  const deleteHistoryAll = () => {
    historyList.value = []
    uni.setStorageSync('historyList', [])
  }
  const searchZhiWei = () => {
    commonConfigRank().then(res => {
      HotObj.value.userList = res.user_job ? res.user_job : [];
      HotObj.value.userCompanyList = res.user_company ? res.user_company : [];
      HotObj.value.companyList = res.company ? res.company : [];
      HotObj.value.schoolList = res.school ? res.school : [];
      HotObj.value.majorList = res.major ? res.major : [];
    })
  }
  const getRecommendList = async () => {
    let res = await commonConfigCli();
    console.log('res------', res)
    let arr = []
    res.map((item, index) => {
      console.log('res---111---', item.field)
      if (item.field == "recommended_job_search") {
        arr = item.value
      }
      return item
    })
    console.log('arr------', arr)
    recommendList.value = arr
  };

  onLoad((params : any) => {
    options.value = params;
    searchZhiWei();
    getRecommendList()
  });
  onShow(() => {
    historyList.value = uni.getStorageSync('historyList');
  })

  const { globalData } = getApp();
  const { clientType } = useUserStore();
</script>

<style scoped lang="scss">
</style>
